<template>
  <div class="item" @click="handleClickItem">
    <el-card
      :body-style="{ padding: '0px' }"
      :shadow="selected?'always': 'never'"
    >
      <div class="header">
        <el-dropdown
          trigger="click"
          class="dropdown"
          @command="handleCommandEvent"
        >
          <span
            class="el-dropdown-link"
            style="font-size: 0.8em;"
            @click.stop
          >
            更多
            <i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="setCover">
              <i class="el-icon-picture-outline" />
              设为封面
            </el-dropdown-item>
            <el-dropdown-item command="delete">
              <i class="el-icon-delete" />
              删除图片
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-image
        style="width: 200px; height: 140px"
        :src="imageUrl"
        fit="cover"
      />
      <div style="padding: 5px;">
        ID: {{ currentPic.id }}
        <span v-if="currentPic.isCover">封面</span>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['index', 'currentPic'],
  data() {
    return {
      selected: false,
      imageUrl: ''
    }
  },
  mounted() {
    console.log('currentPic', this.currentPic)
    this.imageUrl = this.currentPic.url
    if (!this.imageUrl.startsWith('http')) {
      this.imageUrl = process.env.VUE_APP_BASE_API + this.imageUrl.substring(1)
    }
  },
  methods: {
    /** 处理当点击了当前Item时的事件 */
    handleClickItem() {
      this.selected = !this.selected
      if (this.selected) {
        this.$emit('picSelected', this.currentPic)
      } else {
        this.$emit('picCancelSelected', this.currentPic)
      }
    },

    /** 处理当选择命令时的事件 */
    handleCommandEvent(command) {
      if (command === 'setCover') { // 设置为封面
        console.log('设置为封面', this.currentPic)
        this.$emit('coverChanged', this.currentPic)
      } else if (command === 'delete') { // 删除图片
        console.log('删除图片', this.currentPic)
        this.$emit('picDeleted', this.currentPic)
      }
    }
  }
}
</script>
<style scoped>
    .el-card.is-always-shadow{
        box-shadow: 0 0px 5px 0 rgb(1 160 160 / 100%);
    }
    .item {
        width: 200px;
        border:2px solid #fff0;
        margin: 30px 0px 0px 30px;
        display: inline-block;
    }
    .item .header{
        border-bottom:
        1px solid #ccc;
        height: 30px;
        line-height: 30px;
        padding: 0px 8px;
        font-size:0.9em;
    }
    .item .header .index{
        font-size: 0.9em;
        color: #666;
        font-weight: bolder;
    }
    .item .content {
        text-align: center;
        height: 140px;
        border-bottom: 1px solid #ccc;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .item .content img{
        height: 140px;
    }
    .item .footer{
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 0.9em;
    }
    .item .header .dropdown{
        float: right;
    }
    .el-dropdown-link {
        cursor: pointer;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }

</style>
